<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <style>
        body {
            background-image: url("../../static/img/landscape.jpg");
            background-size: cover;
        }
        #main {
            width: 480px;
            height: 550px;
            background-color: white;
            opacity: 0.8; /* 透明度 0-1 */
            border-radius: 10px;
            position: absolute;
            right: 35%;
            top: 15%;
            padding: 20px; /* 增加内边距 */
        }
        h1 {
            font-size: 30px;
            font-weight: bold;
            margin-top: 30px;
            margin-left: 20px;
        }
        .login {
            margin-left: 20px;
            color: silver;
            font-size: 10px;
        }
        a {
            text-decoration: none; /* 去掉文本线 */
        }
        .input-group {
            margin-bottom: 15px; /* 每个输入框组的间距 */
        }
        .input-group label {
            display: inline-block;
            width: 80px; /* 标签宽度 */
            text-align: right;
            margin-right: 10px;
        }
        .inp0 {
            width: 360px;
            height: 40px;
            border-radius: 5px;
            background-color: aliceblue;
            border: 1px solid white;
            outline: none; /* 获得焦点时无任何显示 */
            text-indent: 1em; /* 缩进 */
            font-size: 10px;
        }
        .error {
            color: red;
            font-size: 12px;
            display: none; /* 默认隐藏 */
            margin-left: 90px; /* 与标签对齐 */
            margin-top: 5px; /* 与输入框的间距 */
        }
        .register {
            width: 420px;
            height: 40px;
            border-radius: 10px;
            border: 1px solid white;
            background-color: skyblue;
            font-size: 18px;
            font-weight: bold;
            color: white;
            margin-top: 20px; /* 注册按钮的间距 */
        }
        .register:hover {
            cursor: pointer;
        }
        .checkbox-group {
            margin-top: 20px; /* 复选框组的间距 */
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h1>注册</h1>

    <form action="" method="post">
        {% csrf_token %}
        <div id="main">
            <h1>欢迎注册</h1>

            <p class="login">已有账号？<a href="/user/login">登录</a><a>|</a><a href="/user/index">返回首页</a></p>

            <!-- 用户名 -->
            <div class="input-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名" class="inp0">
            </div>

            <!-- 密码 -->
            <div class="input-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" placeholder="请输入密码" class="inp0">
                <span id="password-error" class="error">密码必须为6-16位字符，包含数字、字母和特殊符号！</span>
            </div>

            <!-- 确认密码 -->
            <div class="input-group">
                <label for="confirm-password">确认密码</label>
                <input type="password" id="confirm-password" name="confirm-password" placeholder="请确认密码" class="inp0">
                <span id="confirm-password-error" class="error">两次输入的密码不一致！</span>
            </div>

            <!-- 邮箱 -->
            <div class="input-group">
                <label for="email">邮箱</label>
                <input type="text" id="email" name="email" placeholder="请输入邮箱" class="inp0">
            </div>

            <!-- 注册按钮 -->
            <div class="input-group">
                <button type="submit" class="register">注册</button>
            </div>

            <!-- 协议 -->
            <div class="checkbox-group">
                <input type="checkbox" id="agree" name="agree" required>
                <label for="agree">阅读并接受 <a href="">《个人网站用户协议》</a>及<a href="">《网站隐私权保护说明》</a></label>
            </div>
        </div>
    </form>

    <script>
        // 密码复杂度正则表达式
        const passwordPattern = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_]).{6,16}$/;

        // 获取元素
        const passwordInput = document.getElementById('password');
        const passwordError = document.getElementById('password-error');
        const confirmPasswordInput = document.getElementById('confirm-password');
        const confirmPasswordError = document.getElementById('confirm-password-error');

        // 实时验证密码
        passwordInput.addEventListener('input', function () {
            if (!passwordPattern.test(passwordInput.value)) {
                passwordError.style.display = 'inline'; // 显示错误提示
            } else {
                passwordError.style.display = 'none'; // 隐藏错误提示
            }
        });

        // 实时验证确认密码
        confirmPasswordInput.addEventListener('input', function () {
            if (confirmPasswordInput.value !== passwordInput.value) {
                confirmPasswordError.style.display = 'inline'; // 显示错误提示
            } else {
                confirmPasswordError.style.display = 'none'; // 隐藏错误提示
            }
        });

        // 表单提交前的最终验证
        document.querySelector('form').addEventListener('submit', function (event) {
            if (!passwordPattern.test(passwordInput.value)) {
                event.preventDefault(); // 阻止表单提交
                passwordError.style.display = 'inline'; // 显示错误提示
            }
            if (confirmPasswordInput.value !== passwordInput.value) {
                event.preventDefault(); // 阻止表单提交
                confirmPasswordError.style.display = 'inline'; // 显示错误提示
            }
        });
    </script>
</body>
</html>